<template>
	<div class="exponentialRegression">
		<el-button type="primary" @click="buttonFun()" ref="btn" size="mini">转换为文本输入</el-button>
		<el-input type="textarea" :rows="11" placeholder="请输入内容" v-model="textarea" @change="txtDataHandle()" v-if="isTxt"></el-input>
		<el-table :data="tableData" size="mini" style="width: 100%" height="260" @cell-mouse-enter="handleCellEnter" @cell-mouse-leave="handleCellLeave" v-if="isTxt==false">
			<el-table-column prop="serial" label="序号">
				<template slot-scope="scope">
					<el-input class="itemInput" v-model="scope.row.serial" placeholder="序号" size="mini"></el-input>
					<span class="itemTxt">{{ scope.row.serial }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="xAxis" label="X轴">
				<template slot-scope="scope">
					<el-input class="itemInput" v-model="scope.row.xAxis" @change="tableDataHandle()" placeholder="X轴" size="mini"></el-input>
					<span class="itemTxt">{{ scope.row.xAxis }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="yAxis" label="Y轴">
				<template slot-scope="scope">
					<el-input class="itemInput" v-model="scope.row.yAxis" @change="tableDataHandle()" placeholder="Y轴" size="mini"></el-input>
					<span class="itemTxt">{{ scope.row.yAxis }}</span>
				</template>
			</el-table-column>
		</el-table>
		<div ref="drawChart" id="drawChart"></div>
	</div>
</template>

<script>
	import ecStat from 'echarts-stat';
	
	export default {
		name: "ExponentialRegression",
		data() {
			return{
				isTxt: false,
				echart: null,
				textarea: '',
				editProp: ['xAxis', 'yAxis'],
				tableData: [{
					serial: 1,
					xAxis: 1,
					yAxis: 4862.4,
				},{
					serial: 2,
					xAxis: 2,
					yAxis: 5294.7,
				},{
					serial: 3,
					xAxis: 3,
					yAxis: 5934.5,
				},{
					serial: 4,
					xAxis: 4,
					yAxis: 7171.0,
				},{
					serial: 5,
					xAxis: 5,
					yAxis: 8964.4,
				},{
					serial: 6,
					xAxis: 6,
					yAxis: 10202.2,
				},{
					serial: 7,
					xAxis: 7,
					yAxis: 11962.5,
				},{
					serial: 8,
					xAxis: 8,
					yAxis: 14928.3,
				},{
					serial: 9,
					xAxis: 9,
					yAxis: 16909.2,
				},{
					serial: 10,
					xAxis: 10,
					yAxis: 18547.9,
				},{
					serial: 11,
					xAxis: 11,
					yAxis: 21617.8,
				},{
					serial: 12,
					xAxis: 12,
					yAxis: 26638.1,
				},{
					serial: 13,
					xAxis: 13,
					yAxis: 34634.4,
				},{
					serial: 14,
					xAxis: 14,
					yAxis: 46759.4,
				},{
					serial: 15,
					xAxis: 15,
					yAxis: 58478.1,
				},{
					serial: 16,
					xAxis: 16,
					yAxis: 67884.6,
				},{
					serial: 17,
					xAxis: 17,
					yAxis: 74462.6,
				},{
					serial: 18,
					xAxis: 18,
					yAxis: 79395.7,
				},{
					serial: 19,
					xAxis: "",
					yAxis: "",
				}],
			}
		},
		computed: {
			tableDataSource(){
				let source = new Array();
				for(let i=0;i<this.tableData.length-1;i++){
					let tmp = new Array();
					tmp.push(parseFloat(this.tableData[i].xAxis));
					tmp.push(parseFloat(this.tableData[i].yAxis));
					source.push(tmp);
				}
				return source;
			},
			txtDataSource(){
				let source = new Array();
				let arr = this.textarea.split("\n");
				for(let i=0;i<arr.length;i++){
					let data = arr[i].split(",");
					let tmp = new Array();
					tmp.push(parseFloat(data[0]));
					tmp.push(parseFloat(data[1]));
					source.push(tmp);
				}
				return source;
			},
		},
		methods: {
			buttonFun(){
				this.isTxt = !this.isTxt;
				if(this.isTxt){
					this.$refs.btn.$el.innerText = "转换为表格输入";
					this.txtDataFormat();
				}else{
					this.$refs.btn.$el.innerText = "转换为文本输入";
					this.tableDataFormat();
				}
			},
			txtDataFormat(){
				let str="";
				for(let i=0;i<this.tableData.length-1;i++){
					if(i!=this.tableData.length-2){
						str += this.tableData[i].xAxis + "," + this.tableData[i].yAxis + "\n";
					}else{
						//如果是最后一行则不带换行符
						str += this.tableData[i].xAxis + "," + this.tableData[i].yAxis;
					}
				}
				this.textarea = str;
			},
			tableDataFormat(){
				this.tableData = new Array();
				let arr = this.textarea.split("\n")
				for(let i=0;i<arr.length;i++){
					let data = arr[i].split(",");
					let obj = {
						serial: i+1,
						xAxis: data[0],
						yAxis: data[1],
					}
					this.tableData.push(obj);
				}
				//插入多一行空行
				let obj = {
					serial: this.tableData.length+1,
					xAxis: "",
					yAxis: "",
				}
				this.tableData.push(obj);
			},
			
			/** 鼠标移入cell */
			handleCellEnter (row, column, cell, event) {
				const property = column.property
				if (this.editProp.includes(property)) {
					cell.querySelector('.itemInput').style.display = 'block'
					cell.querySelector('.itemTxt').style.display = 'none'
				}
			},
			/** 鼠标移出cell */
			handleCellLeave (row, column, cell, event) {
				const property = column.property
				if (this.editProp.includes(property)) {
					cell.querySelector('.itemInput').style.display = 'none'
					cell.querySelector('.itemTxt').style.display = 'block'
				}
			},
			tableDataHandle(){
				let n = this.tableData.length-1;
				// 写到最后一条数据时,自动增加一行
				if(this.tableData[n].xAxis != "" && this.tableData[n].yAxis != ""){
					let arr = {
						serial: n+2,
						xAxis: "",
						yAxis: "",
					}
					this.tableData.push(arr);
				};
				// 倒数第二行没有数据,自动删除一行
				if(this.tableData[n].xAxis == "" && this.tableData[n].yAxis == ""){
					if(this.tableData[n-1].xAxis == "" && this.tableData[n-1].yAxis == ""){
						this.tableData.pop();
					}
				};
				
				this.drawChart(this.tableDataSource);
			},
			txtDataHandle(){
				this.drawChart(this.txtDataSource);
			},
			
			drawChart(source){
				if (this.echart != null && this.echart != "" && this.echart != undefined){
				    this.echart.dispose();
				}
				this.echart = this.$echarts.init(this.$refs.drawChart);
				
				// See https://github.com/ecomfe/echarts-stat
				this.$echarts.registerTransform(ecStat.transform.regression);
				let option = {
					grid: {
						left: '10%',
						right: '10%',
						bottom: '10%',
					},
					dataset: [{
						source: source
					},{
						transform: {
							type: 'ecStat:regression',
							config: {
								method: 'exponential'
								// 'end' by default
								// formulaOn: 'start'
							}
						}
					}],
					title: {
						text: '指数回归曲线',
						subtext: '',
						sublink: '',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
						type: 'cross'
						}
					},
					xAxis: {
						splitLine: {
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					yAxis: {
						splitLine: {
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					series: [{
						name: 'scatter',
						type: 'scatter',
						datasetIndex: 0
					},{
						name: 'line',
						type: 'line',
						smooth: true,
						datasetIndex: 1,
						symbolSize: 0.1,
						symbol: 'circle',
						label: { show: true, fontSize: 16 },
						labelLayout: { dx: -100 },
						encode: { label: 2, tooltip: 1 }
					}]
				};
				
				this.echart.setOption(option);
			}
		},
		mounted(){
			this.drawChart(this.tableDataSource);
		}
	}
</script>

<style scoped>
	.exponentialRegression {
		width: 100%; 
	}
	.exponentialRegression button{
		margin: 10px 0 10px 0; 
	}
	
	#drawChart{
		display: block;
		width: 100%; 
	}
	
	.itemInput{
		display: none;
		width: 100%;
	}
	.itemTxt{
		box-sizing: border-box;
		line-height: 24px;
		padding: 0 15px;
	}
	
	@media screen and (min-width: 1200px){
		#drawChart{
			height: 600px;
		}
	}
	@media screen and (max-width: 1200px){
		#drawChart{
			height: 600px;
		}
	}
	@media screen and (max-width: 767px){
		#drawChart{
			height: 350px;
		}
	}
</style>
